import React,{useState,useEffect}from 'react'
import { Input, Button, Table, Switch,Pagination } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { FormOutlined,DeleteOutlined} from '@ant-design/icons';
import {useNavigate} from 'react-router-dom';
import {getGoodsList} from '../../api/goods';
export default function Goods() {
  let navigate = useNavigate();
  let [loading,setLoading] = useState(false)
  let [data,setData] = useState([]);
   // 查询参数：
   let [query, setQuery] = useState("");
   // 当前页面
   let [pagenum, setPagenum] = useState(1);
   // 每一显示几条数据
   let [pagesize, setPageSize] = useState(5);
   useEffect(()=>{
    getDataList();
   },[query,pagesize,pagenum])
  let columns:ColumnsType<GoodsType> =[
    {
      dataIndex: "goods_id",
      title: "#",
      width:50
    }, {
      dataIndex: "goods_name",
      title: "商品名称",
      width:400
    },{
      dataIndex: "goods_price",
      title: "商品价格",
    },{
      dataIndex: "goods_weight",
      title: "商品总量",
    },
    {
      dataIndex: "add_time",
      title: "创建时间",
    },{
      dataIndex: "actin",
      title: "操作",
      render(text, record:GoodsType) {
        return (
          <>
           <Button type="primary" icon={<FormOutlined/>} size='small'>
            编辑
          </Button> &nbsp; &nbsp;
          <Button type="primary" danger icon={<DeleteOutlined />}>
            删除
          </Button>
          </>
        )
      }
    },
  ]
  let getDataList = async ()=>{
    let res = await getGoodsList({query,pagenum,pagesize});
    console.log(res)
    if(res.data.meta.status===200){
      setData(res.data.data.goods);
    }
  }
  return (
  <div>
     <div style={{ display: "flex" }}>
        <div style={{ width: "300px" }}>
          <Input.Search/>
        </div>
        <div style={{ marginLeft: "10px" }}>
          <Button type='primary' onClick={()=>{
            navigate('/layout/addgoods')
          }}>添加商品</Button>
        </div>
      </div>
      <div style={{ margin: '20px 0' }}>
        <Table columns={columns} dataSource={data} bordered={true} rowKey='goods_id' pagination={false} loading={loading}/>
      </div>
  </div>
  )
}
